import {
  Button,
  Cascader,
  Divider,
  Form,
  FormItem,
  Input,
  InputNumber,
  message,
  Modal,
  Radio,
  RadioGroup,
  RangePicker,
  Row,
  Select,
  SelectOption,
  Space,
  Spin,
  Textarea
} from 'ant-design-vue'
import moment from 'moment'
import { defineComponent, onMounted, ref } from 'vue'

import { riverApi } from '@/apis'
import { ServiceData, ServiceDataConfig } from '@/apis/riverTypes'
import router from '@/router'
import { getAreaOptions, isValueEmpty } from '@/utils'
import { selectData } from '@/views/river/setting/constants'

export default defineComponent({
  name: 'ServiceConfiguration',
  setup() {
    const isPreview = ref(false)
    const data = ref({} as ServiceData)
    const item = ref({} as ServiceDataConfig)
    const loading = ref(false)
    const optionItemCur = ref({} as any)
    const confirmLoading = ref(false)
    onMounted(() => {
      getDetail()
    })

    async function getDetail() {
      try {
        loading.value = true
        ;(data.value = await riverApi.getConfigurationiOInformation()),
          (item.value = await riverApi.getSelectConfigConfiguration())
      } finally {
        loading.value = false
      }
    }
    async function handleSave() {
      try {
        confirmLoading.value = true
        await riverApi.editConfigurationiOInformation(data.value).then(() => {
          message.success('保存成功')
        })
        await riverApi.editGetSelectConfigConfiguration(item.value).then(() => {
          // message.success('保存成功')
        })
      } finally {
        confirmLoading.value = false
      }
    }
    //编辑记录
    function checkaAtion() {
      router.push({
        name: 'ConfigurationRecord'
      })
    }
    return {
      data,
      item,
      loading,
      confirmLoading,
      optionItemCur,
      isPreview,
      getDetail,
      checkaAtion,
      handleSave
    }
  },
  render() {
    return (
      <Spin spinning={this.loading}>
        <Form>
          <Row type="flex">
            <FormItem
              style={{ fontSize: '18px', fontWeight: 600, marginLeft: '52px' }}
            >
              销售公司管理配置
            </FormItem>
          </Row>
          <FormItem
            label="零星总裁默认最多可管"
            style={{ marginTop: '-8px' }}
            colon={false}
            labelCol={{ span: 3 }}
          >
            <InputNumber
              v-model:value={this.data.zeroPresident}
              maxlength={60}
              placeholder="请输入"
              style={{
                width: '130px',
                marginRight: '20px',
                marginLeft: '8px'
              }}
            />
            销售公司
          </FormItem>
          <FormItem
            label="一星总裁默认最多可管"
            style={{ marginTop: '-8px' }}
            colon={false}
            labelCol={{ span: 3 }}
          >
            <InputNumber
              v-model:value={this.data.onePresident}
              maxlength={60}
              placeholder="请输入"
              style={{
                width: '130px',
                marginRight: '20px',
                marginLeft: '8px'
              }}
            />
            销售公司
          </FormItem>
          <FormItem
            label="二星总裁默认最多可管"
            style={{ marginTop: '-8px' }}
            colon={false}
            labelCol={{ span: 3 }}
          >
            <InputNumber
              v-model:value={this.data.twoPresident}
              maxlength={60}
              placeholder="请输入"
              style={{
                width: '130px',
                marginRight: '20px',
                marginLeft: '8px'
              }}
            />
            销售公司
          </FormItem>
          <FormItem
            label="三星总裁默认最多可管"
            style={{ marginTop: '-8px' }}
            colon={false}
            labelCol={{ span: 3 }}
          >
            <InputNumber
              v-model:value={this.data.threePresident}
              maxlength={60}
              placeholder="请输入"
              style={{
                width: '130px',
                marginRight: '20px',
                marginLeft: '8px'
              }}
            />
            销售公司
          </FormItem>
          <FormItem
            label="四星总裁默认最多可管"
            style={{ marginTop: '-8px' }}
            colon={false}
            labelCol={{ span: 3 }}
          >
            <InputNumber
              v-model:value={this.data.fourPresident}
              maxlength={60}
              placeholder="请输入"
              style={{
                width: '130px',
                marginRight: '20px',
                marginLeft: '8px'
              }}
            />
            销售公司
          </FormItem>
          <FormItem
            label="五星总裁默认最多可管"
            style={{ marginTop: '-8px' }}
            colon={false}
            labelCol={{ span: 3 }}
          >
            <InputNumber
              v-model:value={this.data.fivePresident}
              maxlength={60}
              placeholder="请输入"
              style={{
                width: '130px',
                marginRight: '20px',
                marginLeft: '8px'
              }}
            />
            销售公司
          </FormItem>
          <FormItem
            label="正式服务商默认最多可管"
            style={{ marginTop: '-8px' }}
            colon={false}
            labelCol={{ span: 3 }}
          >
            <InputNumber
              v-model:value={this.data.officialServer}
              maxlength={60}
              placeholder="请输入"
              style={{
                width: '130px',
                marginRight: '20px',
                marginLeft: '8px'
              }}
            />
            销售公司
          </FormItem>
          <FormItem
            label="预备服务商默认最多可管"
            style={{ marginTop: '-8px' }}
            colon={false}
            labelCol={{ span: 3 }}
          >
            <InputNumber
              v-model:value={this.data.reserveServer}
              maxlength={60}
              placeholder="请输入"
              style={{
                width: '130px',
                marginRight: '20px',
                marginLeft: '8px'
              }}
            />
            销售公司
          </FormItem>
          <FormItem
            style={{
              fontSize: '18px',
              fontWeight: 600,
              marginTop: '30px',
              marginLeft: '52px'
            }}
          >
            服务商与总裁收益配置
          </FormItem>
          <FormItem
            label="预备服务商收益占销售公司收益的"
            style={{ marginTop: '-8px' }}
            colon={false}
            labelCol={{ span: 4 }}
          >
            <InputNumber
              v-model:value={this.data.reserveServerIncomeConfig}
              placeholder="请输入"
              min={0}
              maxlength={10}
              precision={2}
              style={{
                width: '130px',
                marginRight: '10px',
                marginLeft: '8px'
              }}
            />
            %
          </FormItem>
          <FormItem
            label="正式服务商收益占销售公司收益的"
            style={{ marginTop: '-8px' }}
            colon={false}
            labelCol={{ span: 4 }}
          >
            <InputNumber
              v-model:value={this.data.officialServerIncomeConfig}
              maxlength={10}
              min={0}
              precision={2}
              placeholder="请输入"
              style={{
                width: '130px',
                marginRight: '10px',
                marginLeft: '8px'
              }}
            />
            %
          </FormItem>
          <FormItem
            label="总裁收益占销售公司收益的"
            style={{ marginTop: '-8px' }}
            colon={false}
            labelCol={{ span: 4 }}
          >
            <InputNumber
              v-model:value={this.data.presidentIncomeCofig}
              maxlength={10}
              min={0}
              precision={2}
              placeholder="请输入"
              style={{
                width: '130px',
                marginRight: '10px',
                marginLeft: '8px'
              }}
            />
            %
          </FormItem>
          <FormItem
            style={{
              fontSize: '18px',
              fontWeight: 600,
              marginTop: '30px',
              marginLeft: '52px'
            }}
          >
            服务商费用结算明细配置
          </FormItem>
          <FormItem
            style={{
              marginLeft: '52px'
            }}
            label="服务商结算明细是否展示"
          >
            <RadioGroup
              disabled={this.isPreview}
              v-model:value={this.item.globalIsShow}
            >
              <Radio value={false}>隐藏</Radio>
              <Radio value={true}>展示</Radio>
            </RadioGroup>
            <span
              style={{
                color: 'red'
              }}
            >
              (这里的开关只控制单个基本账号中的开关是否可编辑不联动更改状态)
            </span>
          </FormItem>
          <Row type="flex" justify="start">
            <FormItem
              label="套组专区结算费用"
              style={{
                marginLeft: '52px',
                marginRight: '10px'
              }}
            ></FormItem>
            <FormItem label="总服务费率" colon={false} labelCol={{ span: 8 }}>
              <InputNumber
                v-model:value={this.item.groupAreaSettlementTotalFeesRate}
                maxlength={10}
                min={0}
                precision={2}
                placeholder="请输入"
                style={{
                  width: '130px',
                  marginRight: '10px',
                  marginLeft: '8px'
                }}
              />
              %
            </FormItem>
            <FormItem
              style={{
                marginLeft: '20px'
              }}
              label="外包服务费占比"
              colon={false}
              labelCol={{ span: 9 }}
            >
              <InputNumber
                v-model:value={this.item.groupAreaOutsourcingFeesRate}
                maxlength={10}
                min={0}
                precision={2}
                placeholder="请输入"
                style={{
                  width: '130px',
                  marginRight: '10px',
                  marginLeft: '8px'
                }}
              />
              %
            </FormItem>
          </Row>
          <Row type="flex" justify="start">
            <FormItem
              label="大牌专区结算费用"
              style={{
                marginLeft: '52px',
                marginRight: '10px'
              }}
            ></FormItem>
            <FormItem label="总服务费率" colon={false} labelCol={{ span: 8 }}>
              <InputNumber
                v-model:value={this.item.bigNameAreaSettlementTotalFeesRate}
                maxlength={10}
                min={0}
                precision={2}
                placeholder="请输入"
                style={{
                  width: '130px',
                  marginRight: '10px',
                  marginLeft: '8px'
                }}
              />
              %
            </FormItem>
            <FormItem
              style={{
                marginLeft: '20px'
              }}
              label="外包服务费占比"
              colon={false}
              labelCol={{ span: 9 }}
            >
              <InputNumber
                v-model:value={this.item.bigNameAreaOutsourcingFeesRate}
                maxlength={10}
                min={0}
                precision={2}
                placeholder="请输入"
                style={{
                  width: '130px',
                  marginRight: '10px',
                  marginLeft: '8px'
                }}
              />
              %
            </FormItem>
          </Row>
          <Row type="flex" justify="start">
            <FormItem
              label="品牌精选结算费用"
              style={{
                marginLeft: '52px',
                marginRight: '10px'
              }}
            ></FormItem>
            <FormItem label="总服务费率" colon={false} labelCol={{ span: 8 }}>
              <InputNumber
                v-model:value={this.item.brandSelectionTotalFeesRate}
                maxlength={10}
                min={0}
                precision={2}
                placeholder="请输入"
                style={{
                  width: '130px',
                  marginRight: '10px',
                  marginLeft: '8px'
                }}
              />
              %
            </FormItem>
            <FormItem
              style={{
                marginLeft: '20px'
              }}
              label="外包服务费占比"
              colon={false}
              labelCol={{ span: 9 }}
            >
              <InputNumber
                v-model:value={this.item.brandSelectionOutsourcingFeesRate}
                maxlength={10}
                min={0}
                precision={2}
                placeholder="请输入"
                style={{
                  width: '130px',
                  marginRight: '10px',
                  marginLeft: '8px'
                }}
              />
              %
            </FormItem>
          </Row>
          <Space
            style={{
              marginLeft: '52px'
            }}
          >
            <Space>
              提示：套组专区包含：轻姿颜礼包、轻姿颜半年、蜗牛礼包、奢侈品礼包、好物自选组合礼包;
            </Space>
            <Space>大牌专区包含：黑优礼包；</Space>
            <Space>品牌精选包含：分类为品牌精选的商品+剩下的费用</Space>
          </Space>
          <FormItem
            style={{
              fontSize: '18px',
              fontWeight: 600,
              marginTop: '30px',
              marginLeft: '52px'
            }}
          >
            结算单发布时间
          </FormItem>
          <FormItem
            label="每个月"
            style={{ marginTop: '-8px' }}
            colon={false}
            labelCol={{ span: 2 }}
          >
            <Select
              v-model:value={this.data.statementGenerationDay}
              maxlength={60}
              placeholder="请选择几号"
              style={{
                width: '130px',
                marginRight: '10px',
                marginLeft: '8px'
              }}
            >
              {selectData.map(val => (
                <SelectOption value={val.value}>{val.label}</SelectOption>
              ))}
            </Select>
            号零点发布结算单
          </FormItem>
          <FormItem
            style={{
              fontSize: '18px',
              fontWeight: 600,
              marginTop: '30px',
              marginLeft: '52px'
            }}
          >
            上传发票入口开启时间
          </FormItem>
          <FormItem
            label="每个月"
            style={{ marginTop: '-8px' }}
            colon={false}
            labelCol={{ span: 2 }}
          >
            <Select
              v-model:value={this.data.uploadInvoiceOpenTime}
              maxlength={60}
              placeholder="请选择几号"
              style={{
                width: '130px',
                marginRight: '10px',
                marginLeft: '8px'
              }}
            >
              {selectData.map(val => (
                <SelectOption value={val.value}>{val.label}</SelectOption>
              ))}
            </Select>
            号至
            <Select
              v-model:value={this.data.uploadInvoiceEndTime}
              maxlength={60}
              placeholder="请选择几号"
              style={{
                width: '130px',
                marginRight: '10px',
                marginLeft: '8px'
              }}
            >
              {selectData.map(val => (
                <SelectOption value={val.value}>{val.label}</SelectOption>
              ))}
            </Select>
            开放上传发票入口
          </FormItem>
          <FormItem label=" " colon={false} labelCol={{ span: 1 }}>
            <Button
              loading={this.confirmLoading}
              type="primary"
              onClick={this.handleSave}
              style={{
                width: '200px',
                height: '40px',
                marginTop: '10px',
                marginBottom: '10px'
              }}
            >
              保存
            </Button>
            <Button
              loading={this.confirmLoading}
              type="primary"
              onClick={this.checkaAtion}
              style={{
                width: '200px',
                height: '40px',
                marginTop: '10px',
                marginBottom: '10px',
                marginLeft: '30px'
              }}
            >
              查看操作记录
            </Button>
          </FormItem>
        </Form>
      </Spin>
    )
  }
})
